<template>
  <div class="container">
    <div class="order-detai">
      <div class="delivery-addr">
        <div class="user-info">
          <span class="item">{{ userAddrDto.receiver }}</span>
          <span class="item">{{ userAddrDto.mobile }}</span>
        </div>
        <div class="addr">
          {{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area
          }}{{ userAddrDto.area }}{{ userAddrDto.addr }}
        </div>
      </div>
      <div class="prod-item">
        <div v-for="(item, index) in orderItemDtos" :key="index" @click="toProdPage(item.prodId)">
          <div class="item-cont" :data-prodid="item.prodId">
            <div class="prod-pic">
              <img :src="item.pic" alt="" />
            </div>
            <div class="prod-info">
              <div class="prodname">
                {{ item.prodName }}
              </div>
              <div class="prod-info-cont">
                <span class="number">数量:{{ item.prodCount }}</span>
                <span class="info-item">{{ item.skuName }}</span>
              </div>
              <div class="price-nums clearfix">
                <span class="prodprice">
                  <span class="symbol">￥</span>
                  <span class="big-num">{{ item.price }}</span>
                  <span class="small-num">.00</span>
                </span>
                <div class="btn-box">
                  <span class="btn">申请售后</span>
                  <span class="btn">加购物车</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="prod-foot">
          <div class="btn"></div>
        </div>
      </div>
      <div class="order-msg">
        <div class="msg-item">
          <div class="item">
            <span class="item-tit">订单编号:</span>
            <span class="item-txt">{{ orderNum }}</span>
            <span class="copy-btn">复制</span>
          </div>

          <div class="item">
            <text class="item-tit">下单时间：</text>
            <text class="item-txt">{{ createTime }}</text>
          </div>
        </div>

        <div class="msg-item">
          <div class="item">
            <span class="item-tit">支付方式:</span>
            <span class="item-txt">微信支付</span>
          </div>
          <div class="item">
            <span class="item-tit">配送方式：</span>
            <span class="item-txt">普通配送</span>
          </div>
          <div class="item">
            <span class="item-tit">订单备注：</span>
            <span class="item-txt">{{ remarks }}</span>
          </div>
        </div>
      </div>
      <div class="order-msg">
        <div class="msg-item">
          <div class="item">
            <div class="item-tit">订单总额：</div>
            <div class="item-txt price">
              <span class="symbol">￥</span>

              <span
                v-for="(item, index) in orderItemDtos"
                :key="index"
                class="big-num"
                >{{ item.price }}</span
              >

              <span class="small-num">.0</span>
            </div>
          </div>
          <div class="item">
            <div class="item-tit">运费：</div>
            <div class="item-txt price">
              <span class="symbol">￥</span>
              <span class="big-num">0</span>
              <span class="small-num">.0</span>
            </div>
          </div>
          <div class="item">
            <div class="item-tit">优惠券：</div>
            <div class="item-txt price">
              <span class="symbol">-￥</span>
              <span class="big-num">0</span>
              <span class="small-num">.0</span>
            </div>
          </div>
          <div class="item payment">
            <view class="item-txt price">
              实付款：
              <span class="symbol">￥</span>
              <span
                v-for="(item, index) in orderItemDtos"
                :key="index"
                class="big-num"
                >{{ item.price }}</span
              >
              <span class="small-num">.0</span>
            </view>
          </div>
        </div>
      </div>
      <div class="order-detail-footer">
          <span class="dele-order">删除订单</span>
          <div class="footer-box">
            <span class="apply-service">联系客服</span>
            <span class="buy-again">再次购买</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      orderNum: [],
    };
  },
  onLoad(e) {
    // console.log("eeeee", e.orderNum);
    this.getOrederDel(e.orderNum);
  },
  computed: {
    ...mapState({
      orderList: (state) => state.order.orderList,
      orderNumber: (state) => state.order.orderNum,
      actualTotal: (state) => state.order.actualTotal,
      userAddrDto: (state) => state.order.userAddrDto,
      remarks: (state) => state.order.remarks,
      orderItemDtos: (state) => state.order.orderItemDtos,
      createTime: (state) => state.order.createTime,
      status: (state) => state.order.status,
      productTotalAmount: (state) => state.order.productTotalAmount,
      transfee: (state) => state.order.transfee,
      reduceAmount: (state) => state.order.reduceAmount,
      actualTotal: (state) => state.order.actualTotal,
    }),
  },
  methods: {
    ...mapActions({
      getActionsOrder: "order/getActionsOrder",
      getOrederDel: "order/getOrederDel",
    }),
    toProdPage(id){
      console.log(id);
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`,
      })
      
    }
  },
  mounted() {
    console.log("this....", this.$mp.query);
    const orderNum = this.$mp.query.orderNum;
    if (orderNum) {
      this.orderNum = orderNum;
    }
    // console.log(orderNum);
  },
};
</script>

<style>
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.order-detai {
  margin-bottom: 120rpx;
}
.delivery-addr {
  padding: 20rpx 30rpx;
  background: #fff;
}
.prod-item {
  background-color: #fff;
  margin-top: 15rpx;
  font-size: 28rpx;
}
.order-msg {
  background: #fff;
  margin-top: 15rpx;
  font-size: 28rpx;
}
.order-detail-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 750rpx;
  background: #fff;
  margin: auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding: 22rpx 0;
  font-size: 26rpx;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}
.order-detail-footer .dele-order {
    margin-left: 20rpx;
    line-height: 60rpx;
    display: block;
    margin-right: 20rpx;
    width: 150rpx;
    text-align: center;
}
.order-detail-footer .footer-box {
    flex: 1;
    text-align: right;
    line-height: 60rpx;
}
.order-detail-footer .footer-box .apply-service {
    font-size: 26rpx;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    border: 1px solid #e4e4e4;
    margin-right: 20rpx;
}
.order-detail-footer .footer-box .buy-again {
    font-size: 26rpx;
    color: #fff;
    background: #eb2444;
    border-radius: 50rpx;
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
}
.user-info {
  line-height: 48rpx;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.delivery-addr .addr {
  font-size: 26rpx;
  line-height: 36rpx;
  color: #999;
}
.user-info .item {
  font-size: 28rpx;
  margin-right: 30rpx;
  vertical-align: top;
  display: inline-block;
}
.prod-item .item-cont {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-top: 2rpx solid #f1f1f1;
}
.prod-item .item-cont .prod-pic {
  font-size: 0;
  display: block;
  width: 160rpx;
  height: 160rpx;
  overflow: hidden;
  background: #fff;
  margin-right: 16rpx;
}
.prod-item .item-cont .prod-info {
  margin-left: 10rpx;
  font-size: 28rpx;
  width: 100%;
  position: relative;
  height: 80px;
  -webkit-flex: 1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
}
.prod-item .item-cont .prod-pic image {
  width: 100%;
  height: 100%;
}
.prod-item .item-cont .prod-info .prodname {
  font-size: 28rpx;
  line-height: 40rpx;
  max-height: 86rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
}
.prod-item .item-cont .prod-info .prod-info-cont {
  position: relative;
  color: #999;
  margin-top: 10rpx;
  font-size: 24rpx;
}
.prod-item .item-cont .prod-info .prod-info-cont .number {
  float: left;
  margin-right: 20rpx;
}
.prod-item .item-cont .prod-info .prod-info-cont .info-item {
  color: #999;
  height: 28rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 70%;
}
.prod-item .price-nums {
  margin-top: 30rpx;
}
.prod-item .price-nums .prodprice {
  color: #333;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  float: left;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
.prod-item .price-nums .btn-box {
  float: right;
  text-align: right;
}
.prod-item .price-nums .btn-box .btn {
  padding: 6rpx 30rpx;
  line-height: 36rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  display: inline-block;
  border: 2rpx solid #e4e4e4;
  border-radius: 50rpx;
}
.order-msg .msg-item:first-child {
  border: 0;
}
.order-msg .msg-item .item {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
.order-msg .msg-item .item .item-tit {
  color: #999;
  line-height: 48rpx;
}
.order-msg .msg-item .item .item-txt {
  flex: 1;
  line-height: 48rpx;
}
.order-msg .msg-item .item .copy-btn {
  display: block;
  margin-left: 20rpx;
  border: 2rpx solid #e4e4e4;
  padding: 6rpx 24rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 28rpx;
}
.order-msg .msg-item {
  padding: 20rpx;
  border-top: 2rpx solid #f1f1f1;
}
.order-msg .msg-item .item {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
.order-msg .msg-item .item .item-tit {
  color: #999;
  line-height: 48rpx;
}
.order-msg .msg-item .item .item-txt {
  flex: 1;
  line-height: 48rpx;
}

.order-msg .msg-item:first-child {
  border: 0;
}
.order-msg .msg-item .item {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
.order-msg .msg-item .item.payment {
  border-top: 2rpx solid #f1f1f1;
  color: #eb2444;
  padding-top: 30rpx;
}
.order-msg .msg-item .item {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
.order-msg .msg-item .item .item-tit {
  color: #999;
  line-height: 48rpx;
}
.order-msg .msg-item .item .item-txt.price {
  text-align: right;
}
.order-msg .msg-item .item .item-txt {
  flex: 1;
  line-height: 48rpx;
}
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.order-msg .msg-item .item.payment {
  border-top: 2rpx solid #f1f1f1;
  color: #eb2444;
  padding-top: 30rpx;
}
.order-msg .msg-item .item {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
</style>
